<template>
    <div class="main">
        <div class="header">
            <van-image v-if="userinfo.avatar" round width="5rem" height="5rem" style="margin-left: 20px;margin-right: 10px;" :src="userinfo.avatar"/>
            <van-image v-else round width="5rem" height="5rem" style="margin-left: 20px;margin-right: 10px;" src="https://img01.yzcdn.cn/vant/cat.jpeg"/>
            <p v-if="userinfo.nickname">{{ userinfo.nickname }}</p>
            <p v-else style="font-size: 20px;" @click="handleLogin">登录</p>
            <span @click="handleLogin" v-if="!userinfo.token">立即登录</span>
        </div>
        <div class="order">
            <van-grid :border="false">
                <van-grid-item text="全部订单" to="/order?state=0">
                    <template #icon>
                        <van-icon name="orders-o" size="1.5rem" color="#fa436a" style="margin-bottom: 10px;"/>
                    </template>
                </van-grid-item>
                <van-grid-item  text="待付款" to="/order?state=1">
                    <template #icon>
                        <van-icon name="balance-list-o" size="1.5rem" color="#fa436a" style="margin-bottom: 10px;"/>
                    </template>
                </van-grid-item>
                <van-grid-item icon="send-gift-o" text="待收货" to="/order?state=2">
                    <template #icon>
                        <van-icon name="send-gift-o" size="1.5rem" color="#fa436a" style="margin-bottom: 10px;"/>
                    </template>
                </van-grid-item>
                <van-grid-item icon="flower-o" color="red" text="待评价" to="/order?state=3">
                    <template #icon>
                        <van-icon name="flower-o" size="1.5rem" color="#fa436a" style="margin-bottom: 10px;"/>
                    </template>
                </van-grid-item>
            </van-grid>
        </div>
        <div class="manage">
            <van-cell title="地址管理" is-link to="/address">
                <template #icon>
                    <img src="@/assets/location_flat.png" alt="" style="width: 25px;height: 25px; margin-right:10px;">
                </template>
            </van-cell>
            <van-cell title="我的收藏" is-link to="/favorite">
                <template #icon>
                    <img src="@/assets/star.png" alt="" style="width: 25px;height: 25px;margin-right:10px;">
                </template>
            </van-cell>
            <van-cell title="设置"  is-link to="/set">
                <template #icon>
                    <img src="@/assets/Set-up.png" alt="" style="width: 25px;height: 25px;margin-right:10px;">
                </template>
            </van-cell>
            <div class="logout" @click="handleLogout" v-if="userinfo.token">
                退出登录
            </div>
        </div>
        <div class="footer"></div>
    </div>
</template>
<script>
import {getUserinfo} from "@/api/user"
export default {
   data() {
      return {
            userinfo:{}
      }
   },
   created(){
        this.getUser();
   },
   computed:{
   },
   methods:{
        getUser(){
            if(this.$store.state.token){
                getUserinfo().then(res=>{
                    console.log(res.data.data);
                    this.userinfo = res.data.data;
                })
            }
        },

        handleLogin(){
            this.$router.push("/login")
        },
        handleLogout(){
            this.$dialog.confirm({
                title: '提示',
                message: '你确定要退出登录吗？',
            })
            .then(() => {
                localStorage.removeItem("token");
                this.$router.go(0)
            }).catch(()=>{});
            
        }
   },
}
</script>
<style scoped>
    .main{
        width: 100%;
        height: 100vh;
        background-color: #F5F5F5;
    }
    .header{
        width: 100%;
        height: 200px;
        background-image: url("@/assets/bg.jpg");
        background-position: 100%;
        display: flex;
        align-items: center;
        position: relative;
    }
    .header span{
        position: absolute;
        bottom: 50px;
        right: 30px;
    }
    .order{
        width: 92%;
        margin: 15px auto;
    }
    .manage{
        width: 92%;
        margin: 10px auto;
    }
    .search-icon {
        font-size: 16px;
        line-height: inherit;
    }
    .manage .logout{
        width: 100%;
        height: 70px;
        background-color: #fff;
        line-height: 70px;
        text-align: center;
        color: #FA436A;
    }
    .footer{
        width: 100%;
        height: 20%;
        background-color: #fff;
        position: absolute;
        bottom: 0;
        left:50%;
        transform: translate(-50%,0);
    }
</style>
